<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :leftIcon="true">
			<template #title>
				<text>{{t('my.gywm')}}</text>
			</template>
		</navbar>

		<view class="about-container">
			<!-- Logo部分 -->
			<view class="logo-section">
				<image class="logo" src="/static/icon/logo.svg" mode="aspectFit"></image>
				<text class="logo-text">TIES</text>
			</view>

			<!-- 关于我们内容部分 -->
			<view class="security-section">
				<!-- 加载状态 -->
				<view class="loading-state" v-if="loading">
					<text style="color: #999; text-align: center;">加载中...</text>
				</view>
				
				<!-- 错误状态 -->
				<view class="error-state" v-else-if="error">
					<text style="color: #ff4757; text-align: center;">{{ error }}</text>
					<view class="retry-btn" @click="getAboutContent">
						<text style="color: #0278DC; text-align: center;">重试</text>
					</view>
				</view>
				
				<!-- 内容展示 -->
				<view class="section-content" v-else>
					<!-- 如果有API返回的内容，显示API内容 -->
					<view v-if="articleContent" class="api-content">
						<rich-text :nodes="articleContent"></rich-text>
					</view>
					
					<!-- 如果没有API内容，显示默认的多语言内容 -->
					<view v-else class="default-content">
						<text>{{ t('about.text1') }}<br>{{ t('about.text1-1') }}</text>
						<text>{{ t('about.text2') }}</text>
						<text>{{ t('about.text3') }}</text>
						<text>{{ t('about.text4') }}</text>
						<text>{{ t('about.text5') }}</text>
						<text>{{ t('about.text6') }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { useI18n } from 'vue-i18n';
	import { faqApi } from '@/utils/api.js';
	
	const { t, locale } = useI18n();
	
	// 响应式数据
	const articleContent = ref(''); // 文章内容
	const loading = ref(false); // 加载状态
	const error = ref(''); // 错误信息
	
	// 获取关于我们的文章详情
	const getAboutContent = async () => {
		try {
			loading.value = true;
			error.value = '';
			
			const result = await faqApi.getArticleDetail(23); // 文章ID为23
			
			if (result.code === 200 || result.code === 0) {
				articleContent.value = result.data?.content || result.data?.text || '';
			} else {
				error.value = result.msg || '获取内容失败';
				console.error('获取关于我们内容失败:', result.msg);
				uni.showToast({
					title: result.msg || '获取内容失败',
					icon: 'none'
				});
			}
		} catch (err) {
			error.value = '网络错误，请稍后重试';
			console.error('获取关于我们内容失败:', err);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	// 页面加载时获取内容
	onMounted(() => {
		getAboutContent();
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background: rgba(245, 246, 250, 1);
		padding: 27.91rpx 34.89rpx 48.85rpx 34.89rpx;
		box-sizing: border-box;
	}

	.about-container {
		border-radius: 31.4rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(102, 102, 102, 0.25);
		padding: 85.47rpx 34.89rpx;
	}

	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 43.61rpx;

		.logo {
			width: 104.66rpx;
			height: 74.27rpx;
			margin-bottom: 10rpx;
		}

		.logo-text {
			background: linear-gradient(90deg, rgba(11, 187, 160, 1) 0%, rgba(8, 166, 179, 1) 50%, rgba(2, 121, 219, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			/** 文本1 */
			font-size: 41.86rpx;
			font-weight: 700;
		}
	}





	.security-section {}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.title-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.section-content {
		display: flex;
		flex-direction: column;
		font-size: 27.91rpx;
		font-weight: 300;
		line-height: 40.42rpx;
		color: rgba(51, 51, 51, 1);

		text {
			margin-bottom: 27.9rpx;
		}
	}

	.loading-state, .error-state {
		padding: 40rpx;
		text-align: center;
	}

	.retry-btn {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		border: 1rpx solid #0278DC;
		border-radius: 8rpx;
		display: inline-block;
		cursor: pointer;
	}

	.api-content {
		line-height: 1.6;
		color: #333;
	}

	.default-content text {
		display: block;
		margin-bottom: 20rpx;
		line-height: 1.6;
		color: #333;
	}
</style>